import React, { useState } from "react";
import { ColorPicker, Button } from "antd";
import {
  PictureOutlined,
  UserOutlined,
  AudioOutlined,
  VideoCameraOutlined,
  DownloadOutlined,
} from "@ant-design/icons";
import { bgType, modelType, bgmType, streamType, saveType } from "./type";
import styles from "./index.less";
import bg1 from "../../../public/bgList/bg1.jpeg";
import bg2 from "../../../public/bgList/bg2.jpeg";
import bg3 from "../../../public/bgList/bg3.jpeg";
import bg4 from "../../../public/bgList/bg4.jpeg";
import bg5 from "../../../public/bgList/bg5.jpeg";
import bg6 from "../../../public/bgList/bg6.jpeg";
import bg7 from "../../../public/bgList/bg7.jpeg";
import bg8 from "../../../public/bgList/bg8.jpeg";
import bg9 from "../../../public/bgList/bg9.jpeg";

type IProps = {
  id: number;
  setBgImg: Function;
};

const AnimationTab: React.FC<IProps> = ({ id, setBgImg }: IProps) => {
  const [bgColor, setBgColor] = useState<string>("#ffffff");
  const bgList: bgType[] = [
    {
      id: 0,
      name: "图片 1",
      url: bg1,
    },
    {
      id: 1,
      name: "图片 2",
      url: bg2,
    },
    {
      id: 2,
      name: "图片 3",
      url: bg3,
    },
    {
      id: 3,
      name: "图片 4",
      url: bg4,
    },
    {
      id: 4,
      name: "图片 5",
      url: bg5,
    },
    {
      id: 5,
      name: "图片 6",
      url: bg6,
    },
    {
      id: 6,
      name: "图片 7",
      url: bg7,
    },
    {
      id: 7,
      name: "图片 8",
      url: bg8,
    },
    {
      id: 8,
      name: "图片 9",
      url: bg9,
    },
  ]; // 背景图片
  const threeDBgList: bgType[] = [
    {
      id: 0,
      name: "3D 背景 1",
      url: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/HDR_029_Sky_Cloudy_Ref.hdr",
    },
    {
      id: 1,
      name: "3D 背景 2",
      url: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/container_free_Ref.hdr",
    },
    {
      id: 2,
      name: "3D 背景 3",
      url: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/HDR_040_Field_Ref.hdr",
    },
    {
      id: 3,
      name: "3D 背景 4",
      url: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/HDR_041_Path_Ref.hdr",
    },
  ];
  const modelList: modelType[] = [
    {
      id: 0,
      name: "人物 1",
      model: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/boy1.vrm",
    },
    {
      id: 1,
      name: "人物 2",
      model: "https://deeplor.oss-cn-hangzhou.aliyuncs.com/AR/girl1.vrm",
    },
    {
      id: 2,
      name: "人物 3",
      model:
        "https://cdn.glitch.com/29e07830-2317-4b15-a044-135e73c7f840%2FAshtra.vrm?v=1630342336981",
    },
  ]; // 人物替换
  const bgmList: bgmType[] = [
    {
      id: 0,
      name: "音乐 1",
      bgm: "",
    },
    {
      id: 1,
      name: "音乐 2",
      bgm: "",
    },
    {
      id: 2,
      name: "音乐 3",
      bgm: "",
    },
    {
      id: 3,
      name: "音乐 4",
      bgm: "",
    },
  ]; // 背景音乐
  const streamTypeList: streamType[] = [
    {
      id: 0,
      name: "视频",
      type: "video",
    },
    {
      id: 1,
      name: "实时",
      type: "realtime",
    },
  ];
  const saveList: saveType[] = [
    {
      id: 0,
      name: "保存 3D 图片",
      type: "3D",
    },
    {
      id: 1,
      name: "保存 Canvas 图片",
      type: "Canvas",
    },
    {
      id: 2,
      name: "保存全景图",
      type: "全景图",
    },
  ]; // 保存形式

  const changeColor = (color: unknown) => {
    //     console.log(color,'color');
    //     setBgColor(color);
  };

  const getIcon = (id: number) => {
    switch (id) {
      case 1:
        return <UserOutlined />;
      case 2:
        return <AudioOutlined />;
      case 3:
        return <VideoCameraOutlined />;
      default:
        return <DownloadOutlined />;
    }
  };

  const RenderButton = ({ id, item }: any) => (
    <div key={item.id}>
      <Button icon={getIcon(id)}>{item.name}</Button>
    </div>
  );

  return id === 0 ? (
    <div className={styles.bgContent}>
      <div className={styles.bgImgTitle}>2D</div>
      <div className={styles.bgImgList}>
        {bgList.map((item) => (
          <div
            key={item.id}
            className={styles.bgImg}
            onClick={() => setBgImg(item.url)}
          >
            <img src={item.url} alt={item.name} />
          </div>
        ))}
      </div>
      <div className={styles.threeDImgTitle}>3D</div>
      <div className={styles.threeDImgList}>
        {threeDBgList.map((item) => (
          <div key={item.id} className={styles.threeDImgItem}>
            <Button icon={<PictureOutlined />}>{item.name}</Button>
          </div>
        ))}
      </div>
      <div>颜色</div>
      <ColorPicker
        format="hex"
        defaultValue="#ffffff"
        size="large"
        showText
        onChange={changeColor}
      />
    </div>
  ) : (
    <div>
      {(id === 1
        ? modelList
        : id === 2
          ? bgmList
          : id === 3
            ? streamTypeList
            : saveList
      ).map((item) => (
        <RenderButton key={item.id} id={id} item={item} />
      ))}
    </div>
  );
};

export default AnimationTab;
